<template>
  <div class="demo-collapse">
    <el-collapse>
      <el-collapse-item
        v-for="item in legendList"
        :key="item.id"
        :title="item.name"
      >
        <div v-for="_legend in item.legends[0].legend" :key="_legend.url">
          <img :src="`data:image/png;base64,` + _legend.imageData" />
          <span>{{ _legend.label ? _legend.label : "所有" }}</span>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
interface LegendListType {
  id: number;
  name: string;
  legends?: Array<FeaturesLayer>;
  features?: Array<Features>;
}
interface FeaturesLayer {
  layerId: number;
  layerName: string;
  layerType: string;
  legend?: any[];
  maxScale: number;
  minScale: number;
}
interface Features {
  id: number;
  data: string;
  title: string;
}

export default defineComponent({
  props: {
    legendList: {
      type: Array as PropType<LegendListType[]>,
      default: [],
    },
  },
});
</script>

<style scoped></style>
